<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理新增</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->
    <style>
        .layui-table-cell .listbox .layui-form-checkbox[lay-skin=primary]{padding-left: 28px !important;}
    </style>
</head>
<body class="bg_w">


<div class="layui-fluid">
    <div class="content-wrap">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm4">
                        <label class="layui-form-label">角色代码</label>
                        <div class="layui-input-block">
                            <input type="text" name="code"  lay-verify="required|usercode" placeholder="请输入角色代码" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <h5 class="lheight"><span class="red">*</span>角色代码字母+数字，50字符内</h5>
                    </div>

                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm4">
                        <label class="layui-form-label">角色名称</label>
                        <div class="layui-input-block">
                            <input type="text" lay-verify="required|name" name="name"  placeholder="请输入角色名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <h5 class="lheight"><span class="red">*</span>角色名称只能输入汉字、字母和数字，100字符内</h5>
                    </div>
                    <div class="layui-col-xs12 layui-form-text">
                        <label class="layui-form-label">角色描述</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入角色描述" name="describe" class="layui-textarea"></textarea>
                        </div>
                    </div>

                </div>
            </div>
            <h5 class="lheight">权限管理：</h5>
            <table id="table1" class="layui-table" lay-filter="table1"></table>
            <div class="layui-form-item layui-col-space10">
                <div class="layui-input-block">
                    <button id="btnClose" class="layui-btn layui-btn-primary btn-left">关闭</button>
                    <button class="layui-btn add_btn btn-left" lay-submit lay-filter="component-form-element">提交</button>

                </div>
            </div>

        </form>



    </div>
</div>


</body>
<script>
    layui.config({
        base: '../../layui/lay/modules/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['treetable'], function () {
        var treetable = layui.treetable;

    });
    layui.use(['table','form','treetable'], function(){
        var table = layui.table;
        var form=layui.form;
        var treetable = layui.treetable;

        // 渲染表格
        treetable.render({
            treeColIndex: 0,          // treetable新增参数
            treeSpid: -1,             // treetable新增参数
            treeIdName: 'd_id',       // treetable新增参数
            treePidName: 'd_pid',     // treetable新增参数
            treeDefaultClose: true,   // treetable新增参数
            treeLinkage: true,        // treetable新增参数
            elem: '#table1',
            url: 'json/data1.json',
            cols: [[
                // {type: 'numbers'},
                // {field: 'id', title: 'id'},
                {field: 'name', title: '导航名称'},
                {field: 'pid', title: '权限分配', templet: function (d) {
                        return '<div class="listbox">\n' +
                            '      <input type="checkbox" name="add" value="增加" lay-skin="primary" title="增加" checked="">\n' +
                            '      <input type="checkbox" name="delete" value="删除" lay-skin="primary" title="删除">\n' +
                            '      <input type="checkbox" name="read" value="查看" lay-skin="primary" title="查看" >\n' +
                            '    </div>'
                    }},
                {field: 'sex', title: '数据权限'},

                {type: 'checkbox', fixed: 'right'}
            ]]
        });
        // 全选



        form.on('submit(component-form-element)', function(data){
            //获取所有表单的值
            var ss=data.field;
            ax.post({
                url: '',
                contentType: "application/x-www-form-urlencoded",
                data: data.field,
                success: function (data) {

                }
            });

            console.log(ss)
            return false;

        });

        $('#btnClose').on("click", function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });

        //添加验证规则
        form.verify({
            usercode:[
                /^[a-zA-Z][a-zA-Z0-9]{1,50}$/,
                "角色代码必须是字母+数字，50字符内！"
            ],
            name:[
                /^[a-zA-Z0-9\u4e00-\u9fa5]{1,100}$/,
                '角色名称只能输入汉字、字母和数字，100字符内'
            ],
        });

    });

</script>
</html>